import { Component, Fragment } from "react";
import { Button, Table,Row,Col,Pagination } from "antd";
import PropTypes from "prop-types";
import { custom } from "api/common.js";

class TableComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      switchFlag: false,
      dataSource: [],
      id: null,
      requestData: {},
      total:0,
      pageNumber: 1,
      pageSize: 10,
      currentItemAry:[] //批量删除选中的item
    };
  }
  // 生命周期-第一次页面加载才会出发
  componentDidMount() {
    const { requestData } = this.props.tableConfig;
    this.setState({ requestData }, () => {
      this.init();
    });
  }
  // 用于请求之前过滤一层
  init = async data => {
    this.initData(data);
  };
  // 请求数据--传请求数据
  initData = async data => {
    const { requestData } = this.state;
    if (data) {
      //设置默认值的一种方式
      requestData.data = {  ...requestData.data, ...data };
    }
    const res = await custom(requestData);
    if (res.data.data.length > 0) {
      this.setState({
        dataSource: res.data.data,
        total: res.data.total
      });
    }
    if(res.data.data.length ===0){
      this.setState({
        dataSource:[],
        total:0
      });
    }
  };
  // 分页 
  changePageCurrent=(pageNumber,pageSize)=>{
    //选择的页码
    if(pageNumber!==0){
      this.setState({pageNumber,pageSize},()=>{
         this.initData({pageNumber,pageSize})
      })
    }
    if(pageSize!==this.state.pageSize){
      this.setState({pageNumber:1,pageSize},()=>{
        this.initData({pageNumber:1,pageSize})
     })
    }
    
  }
  changePageSize=(num)=>{
    // 点击左右得到的页码
    const {pageSize} = this.state
    if(num!==0){
      this.setState({pageNumber:num},()=>{
         this.initData({pageNumber:num,pageSize})
      })
    }
  }

  render() {
    const { tableConfig, batch } = this.props;
    const { dataSource, id,total,currentItemAry } = this.state;
    const {
        border = true,
        rowKey,
        isShowBatch = false,
        isShowCheckbox = true
      } = tableConfig;

    // 多选--最终得到id形成的字符串--针对这个项目
    const selectedRowKeys = {
      // record点击的单个item selected是否选中 selectedRow选中的数组
      // onChange: (selectedRowKeys, selectedRows) => {
      // },
      onSelect: (record, selected, selectedRows) => {
        const idString = selectedRows.map(item => item.id).join(",") || "";
        this.setState({ id: idString,currentItemAry:selectedRows });
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        const idString = selectedRows.map(item => item.id).join(",") || "";
        this.setState({ id: idString,currentItemAry:selectedRows });
      }
    };
    return (
      <Fragment>
        <Table
          columns={tableConfig.thead}
          dataSource={dataSource}
          bordered={border}
          rowKey={rowKey}
          rowSelection={isShowCheckbox ? selectedRowKeys : false}
          pagination={false}
        ></Table>
        {/* 分页+批量删除 */}
        <Row style={{marginTop:'20px'}}>
          <Col span={8}>
            {isShowBatch ? (
              <Button onClick={() => batch(id,currentItemAry)}>批量删除</Button>
            ) : (
              <span />
            )}
          </Col>
          <Col span={16}>
            <Pagination
              onChange={this.changePageCurrent}
              onShowSizeChange={this.changePageSize}
              className="pull-right"
              total={total}
              defaultCurrent={1}
              showSizeChanger
              showQuickJumper
              showTotal={total => `Total ${total} items`}
            />
          </Col>
        </Row>
      </Fragment>
    );
  }
}
// 校验参数
TableComponent.propTypes = {
  tableConfig: PropTypes.object, //配置项
  batch: PropTypes.func //批量删除-返回一个id字符串出去
};
// 参数默认
TableComponent.defaultProps = {};

export default TableComponent;
